/** @format */

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const UglifyPlugin = require("uglifyjs-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const ESLintPlugin = require("eslint-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");
const webpack = require("webpack");

module.exports = {
  mode: "production",
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
    // publicPath: "http://www.yiqingang.com/",
  },
  // watch: true,
  // watchOptions: {
  //   poll: 1000, // 轮询次数/秒
  //   aggregateTimeout: 500, // watch的防抖
  //   ignored: /node_modules/, // 忽略的文件夹
  // },
  module: {
    rules: [
      {
        test: /\.html$/,
        use: "html-withimg-loader",
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        // use: ["file-loader"],
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 1 * 1024,
              outputPath: "images/",
              // publicPath: "http://www.image.com/",
              esModule: false,
            },
          },
        ],
      },

      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
      {
        test: /\.css$/,
        use: [
          // {
          //   loader: "style-loader",
          //   options: {
          //     // insert: "top",
          //   },
          // },
          MiniCssExtractPlugin.loader,
          "css-loader",
          "postcss-loader",
        ],
      },
    ],
  },

  // devServer: {},
  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: "./index.html",
      // minify: {
      //   removeAttributeQuotes: true,
      //   // collapseWhitespace: true,
      // },
      hash: true,
    }),
    new MiniCssExtractPlugin({
      filename: "css/index.css",
    }),
    // new ESLintPlugin({
    //   extensions: ["js"],
    // }),
    new webpack.ProvidePlugin({
      $: "jquery", // 给每个模块注入$
    }),
    new CleanWebpackPlugin(),
    new CopyPlugin([
      {
        from: "./docs/test.md",
        to: "./docs/test.md",
      },
    ]),
  ],
  // externals: {
  //   jquery: "jQuery",
  // },
  // 优化项
  optimization: {
    minimizer: [
      new UglifyPlugin({
        cache: true, // 缓存
        parallel: true, // 并行压缩
        sourceMap: true, // 源码地图
      }),
      new OptimizeCSSAssetsPlugin({}),
    ],
  },
  // devtool: "source-map",
  // devtool: "eval-source-map",
  // devtool: "cheap-module-source-map",
  devtool: "cheap-module-eval-source-map",
};
